import {Chart, registerShape} from "@antv/g2";

export const Charts = Object.freeze({



  /**
   * 按日查看销售数据走销
   */
  daySalesChart(chartWidth,) {
    const salesData = [];
    for (let i = 1; i <= 31; i++) {
      let item = {"day": i + "号", "month": '本月', 'sales': 100 + Number((Math.random() * 10).toFixed(0))}
      salesData.push(item)
    }

    for (let i = 1; i <= 31; i++) {
      let item = {"day": i + "号", "month": '上月', 'sales': 100 + Number((Math.random() * 10).toFixed(0))}
      salesData.push(item)
    }

    const salesChart = new Chart({
      container: 'daySales',
      autoFit: true,
      height: 400,
      width: chartWidth,
      padding: [20, 20, 80, 80], // 上，右，下，左
    });

    salesChart.data(salesData);
    salesChart.scale({
      day: {
        range: [0, 1],
      },
      sales: {
        nice: true,
      },
    });

    salesChart.tooltip({
      showCrosshairs: true,
      shared: true,
    });

    salesChart.axis('sales', {
      label: {
        formatter: (val) => {
          return val + ' 元';
        },
      },
    });

    //辅助线为虚线不起作用
    salesChart.annotation().line({
      start: [100, 'min'],
      end: [2000, 'max'],
      style: {
        lineDash: [10, 10]
      }
    });

    salesChart
      .line()
      .position('day*sales')
      .color('month')
      .shape('smooth');

    salesChart
      .point()
      .position('day*sales')
      .color('month')
      .shape('circle');

    salesChart.render();
  },

  /**
   * 按日查看销售数据走销
   */
  dayCountChart(chartWidth) {
    const countData = [];
    for (let i = 1; i <= 31; i++) {
      let item = {"day": i + "号", "month": '本月', 'sales': 100 + Number((Math.random() * 10).toFixed(0))}
      countData.push(item)
    }

    for (let i = 1; i <= 31; i++) {
      let item = {"day": i + "号", "month": '上月', 'sales': 100 + Number((Math.random() * 10).toFixed(0))}
      countData.push(item)
    }

    const chart = new Chart({
      container: 'dayCount',
      autoFit: true,
      height: 400,
      width: chartWidth,
      padding: [20, 20, 80, 80], // 上，右，下，左
    });

    chart.data(countData);
    chart.scale({
      day: {
        range: [0, 1],
      },
      sales: {
        nice: true,
      },
    });

    chart.tooltip({
      showCrosshairs: true,
      shared: true,
    });

    chart.axis('sales', {
      label: {
        formatter: (val) => {
          return val + ' 元';
        },
      },
    });

    //辅助线为虚线不起作用
    chart.annotation().line({
      start: [100, 'min'],
      end: [2000, 'max'],
      style: {
        lineDash: [10, 10]
      }
    });

    chart
      .line()
      .position('day*sales')
      .color('month')
      .shape('smooth');

    chart
      .point()
      .position('day*sales')
      .color('month')
      .shape('circle');

    chart.render();
  },

  /**
   * 按日查看销售数据走销
   */
  dayProfitChart(chartWidth) {
    const prpfotData = [];
    for (let i = 1; i <= 31; i++) {
      let item = {"day": i + "号", "month": '本月', 'sales': 100 + Number((Math.random() * 10).toFixed(0))}
      prpfotData.push(item)
    }

    for (let i = 1; i <= 31; i++) {
      let item = {"day": i + "号", "month": '上月', 'sales': 100 + Number((Math.random() * 10).toFixed(0))}
      prpfotData.push(item)
    }

    const chart = new Chart({
      container: 'dayProfit',
      autoFit: true,
      height: 400,
      width: chartWidth,
      padding: [20, 20, 80, 80], // 上，右，下，左
    });

    chart.data(prpfotData);
    chart.scale({
      day: {
        range: [0, 1],
      },
      sales: {
        nice: true,
      },
    });

    chart.tooltip({
      showCrosshairs: true,
      shared: true,
    });

    chart.axis('sales', {
      label: {
        formatter: (val) => {
          return val + ' 元';
        },
      },
    });

    //辅助线为虚线不起作用
    chart.annotation().line({
      start: [100, 'min'],
      end: [2000, 'max'],
      style: {
        lineDash: [10, 10]
      }
    });

    chart
      .line()
      .position('day*sales')
      .color('month')
      .shape('smooth');

    chart
      .point()
      .position('day*sales')
      .color('month')
      .shape('circle');

    chart.render();
  },

  monthSalesChart(chartWidth) {
    const data = [
      {year: '1 月', 销售额: 38.00},
      {year: '2 月', 销售额: 52.65},
      {year: '3 月', 销售额: 61.21},
      {year: '4 月', 销售额: 145.25},
      {year: '5 月', 销售额: 48.00},
      {year: '6 月', 销售额: 38.32},
      {year: '7 月', 销售额: 39.54},
      {year: '8 月', 销售额: 58.21},
      {year: '9 月', 销售额: 145.02},
      {year: '10 月', 销售额: 48.02},
      {year: '11 月', 销售额: 38.10},
      {year: '12 月', 销售额: 68.24},
    ];
    const chart = new Chart({
      container: 'monthSales',
      autoFit: true,
      height: 400,
      width: chartWidth,
      padding: [30, 20, 60, 60],
    });

    chart.data(data);
    chart.scale('销售额', {
      nice: true,
    });

    chart.tooltip({
      showMarkers: false
    });
    chart.interaction('active-region');

    chart.interval().position('year*销售额')
      .color("#58afff");

    chart.render();
  },

  monthCountChart(chartWidth) {
    const data = [
      {year: '1 月', 销售额: 38.00},
      {year: '2 月', 销售额: 52.65},
      {year: '3 月', 销售额: 61.21},
      {year: '4 月', 销售额: 145.25},
      {year: '5 月', 销售额: 48.00},
      {year: '6 月', 销售额: 38.32},
      {year: '7 月', 销售额: 39.54},
      {year: '8 月', 销售额: 58.21},
      {year: '9 月', 销售额: 145.02},
      {year: '10 月', 销售额: 48.02},
      {year: '11 月', 销售额: 38.10},
      {year: '12 月', 销售额: 68.24},
    ];
    const chart = new Chart({
      container: 'monthCount',
      autoFit: true,
      height: 400,
      width: chartWidth,
      padding: [30, 20, 60, 60],
    });

    chart.data(data);
    chart.scale('销售额', {
      nice: true,
    });

    chart.tooltip({
      showMarkers: false
    });
    chart.interaction('active-region');

    chart.interval().position('year*销售额')
      .color("#58afff");

    chart.render();
  },

  monthProfitChart(chartWidth) {
    const data = [
      {year: '1 月', 销售额: 38.00},
      {year: '2 月', 销售额: 52.65},
      {year: '3 月', 销售额: 61.21},
      {year: '4 月', 销售额: 145.25},
      {year: '5 月', 销售额: 48.00},
      {year: '6 月', 销售额: 38.32},
      {year: '7 月', 销售额: 39.54},
      {year: '8 月', 销售额: 58.21},
      {year: '9 月', 销售额: 145.02},
      {year: '10 月', 销售额: 48.02},
      {year: '11 月', 销售额: 38.10},
      {year: '12 月', 销售额: 68.24},
    ];
    const chart = new Chart({
      container: 'monthProfit',
      autoFit: true,
      height: 400,
      width: chartWidth,
      padding: [30, 20, 60, 60],
    });

    chart.data(data);
    chart.scale('销售额', {
      nice: true,
    });

    chart.tooltip({
      showMarkers: false
    });
    chart.interaction('active-region');

    chart.interval().position('year*销售额')
      .color("#58afff");

    chart.render();
  },

  //各类设备投币数量比例
  deviceRatio() {

    const data = [
      {type: '兑币机', value: 20},
      {type: '娃娃机', value: 18},
      {type: '摇摇车', value: 32},
      { type: '扭蛋机', value: 15 },
      { type: '挖糖机', value: 15 },
      { type: '其它', value: 15 },
    ];

    const chart = new Chart({
      container: 'ratio',
      autoFit: true,
      height: 285,
    });

    chart.data(data);

    chart.scale('percent', {
      formatter: (val) => {
        val = val * 100 + '%';
        return val;
      },
    });

// 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
    const sliceNumber = 0.01;

    // 自定义 other 的图形，增加两条线
    registerShape('interval', 'slice-shape', {
      draw(cfg, container) {
        const points = cfg.points;
        let path = [];
        // @ts-ignore
        path.push(['M', points[0].x, points[0].y]);
        // @ts-ignore
        path.push(['L', points[1].x, points[1].y - sliceNumber]);
        // @ts-ignore
        path.push(['L', points[2].x, points[2].y - sliceNumber]);
        // @ts-ignore
        path.push(['L', points[3].x, points[3].y]);
        path.push('Z');
        path = this.parsePath(path);
        return container.addShape('path', {
          attrs: {
            fill: cfg.color,
            path,
          },
        });
      },
    });

    chart.coordinate('theta', {
      radius: 0.75, //设外圈
      innerRadius: 0.75, //设内圈大小
    });
    chart.tooltip({
      showTitle: false,
      showMarkers: false,
      itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>',
    });
    chart
      .interval()
      .adjust('stack')
      .position('value')
      .color('type')
      .shape('slice-shape');

    chart.legend({
      position: 'right',
      offsetX: -25
    })

    chart.render();


  },

});
